//	新建表单
import { Form, Input, Modal, Select, Button, message,  Popconfirm, Alert } from 'antd';
import React, { useState } from 'react';
import { addNewDataOriginalInput } from 'src/services/DataManage/type';
import { testConnectionDB } from 'src/services/DataManage/index';

interface AddNewModalComponentProps {
	modalVisible: boolean,
	modalStatus: string,
	onCreate: ( value: addNewDataOriginalInput ) => void;
	closeModal: ( value: boolean ) => void;
}

export const AddNewModalComponent = React.forwardRef( ( props: AddNewModalComponentProps, formRef: any ) => {
	const layout = {
		labelCol: { span: 6 },
		wrapperCol: { span: 18 },
	};

	const formDisable = props.modalStatus === 'ENABLE' ? true : false;

	const fieldConfig = [
		// {
		// 	name: 'type',
		// 	label: '类型',
		// 	rules: [ { required: true, message: '请选择类型' } ],
		// 	component: (
		// 		<Select defaultValue={'1'}>
		// 			<Select.Option value="1">MySql8</Select.Option>
		// 			<Select.Option value="3">oracle</Select.Option>
		// 			<Select.Option value="4">sqlserver</Select.Option>
		// 			{/*<Select.Option value="5">hive</Select.Option>*/}
		// 			<Select.Option value="6">hive2</Select.Option>
		// 			<Select.Option value="9">Hana</Select.Option>
		// 		</Select>
		// 	)
		// },
		// {
		// 	name: 'authType ',
		// 	label: '连接类型',
		// 	rules: [ { required: true, message: '请选择类型' } ],
		// 	component: (
		// 		<Select defaultValue={'2'}>
		// 			<Select.Option value="1">用户名</Select.Option>
		// 			<Select.Option value="2">用户名和密码</Select.Option>
		// 		</Select>
		// 	),
		// },
		{
			name: 'name',
			label: '数据源名称',
			rules: [ { required: true, message: '请输入名称' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		{
			name: 'comments',
			label: '描述',
			rules: [ { required: false, message: '请输入名称' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		{
			name: 'address',
			label: '数据库地址',
			rules: [ { required: true, message: '请输入内容' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		{
			name: 'port',
			label: '端口',
			rules: [ { required: true, message: '请输入内容' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		{
			name: 'dbName',
			label: '数据库',
			rules: [ { required: true, message: '请输入名称' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		{
			name: 'dbUser',
			label: '用户名',
			rules: [ { required: true, message: '请输入内容' } ],
			component: <Input autoComplete="off" disabled={formDisable}></Input>
		},
		// {
		// 	name: 'dbPassword',
		// 	label: '密码',
		// 	rules: [ { required: true, message: '请输入内容' } ],
		// 	component: <Input.Password></Input.Password>,
		// }
	];

	const [ loading, setLoading ] = useState( false );
	const [ form ] = Form.useForm();
	
	const [ popv,setPopv ] = useState( false ); //测试连接是否成功弹窗控制显影
	const [ ty, setTy ] = useState( '1' ); //选择连接数据类型控制显示authType
	
	const[ showPwd,setShowPwd ] = useState( 2 ); //根据authType控制是否显示密码输入

	const handleConnect = async () => {
		setLoading( true );
		form.validateFields().then( async ( value: any ) => {
			//address: "10.81.128.246"
			// comments: "测试连接接口测试"
			// dbName: "PORTALDB"
			// dbPassword: "Dtt123456"
			// dbUser: "portal"
			// name: "测试oracle"
			// port: "1521"
			// type: "3"
			// console.log( value );
			// console.log( '连接' );
			const result = await testConnectionDB( { 'data': 
					{ 'dbName': value.dbName,
						'dbPassword': value.dbPassword,
						'dbType': value.type,
						'dbUserName': value.dbUser,
						'ip': value.address,
						'port': value.port } } );
			if ( result.data && result.data.success ) {
				setPopv( true );
			}
		} ).catch( info => {
			message.warning( '请完善信息' );
		} ).finally( () => {
			setLoading( false );
		} );

	};
	
	const handleOk = () => {
		setLoading( true );
		form.validateFields().then( ( value: any ) => {
			console.log( value );
			props.onCreate( value );
		} ).catch( info => {
			message.warning( '请完善信息' );
		} ).finally( () => {
			setLoading( false );
		} );
	};

	const handleCancel = () => {
		props.closeModal( false );
		setPopv( false );
		setShowPwd( 2 );
		setTy( '1' );
	};
	
	const handleSelectType = value => {
		form.setFieldsValue( value );
		setTy( value );
	};

	const handleSelectConnectType = value => {
		form.setFieldsValue( value );
		setShowPwd( value );
	};
	

	return (
		<Modal
			destroyOnClose
			title="添加数据源"
			visible={ props.modalVisible }
			onCancel={ handleCancel }
			footer={ [
				<Popconfirm title={'测试成功'}
					okText="确定"
					cancelText="取消"
					placement="topLeft"
					key="connect" visible={popv}
					icon={null}
					onCancel={() => setPopv( false )}
					onConfirm={() => setPopv( false )}
				>
					<Button  type="primary" onClick={ handleConnect } disabled={formDisable}>
							测试连接
					</Button>
				</Popconfirm>,
				<Button key="submit" type="primary" loading={ loading } onClick={ handleOk } disabled={formDisable}>
					确定
				</Button>,
				<Button key="cancel" onClick={ handleCancel }>
					取消
				</Button>,
			] }
		>
			<Form
				preserve={false}
				ref={ formRef }
				{ ...layout }
				form={ form }
				name="basic"
				initialValues={ { remember: true,authType: 2 } }
			>
				{ formDisable ? ( <Alert message="启用状态不可编辑，请先禁用" type="warning" style={ { marginBottom: '24px' } } /> ) : null }

				<Form.Item label={ '类型' } name={ 'type' } rules={ [ { required: true, message: '请选择类型' } ] }  key={ 4214 }>
					<Select onChange={handleSelectType} disabled={formDisable}>
						<Select.Option value="1">MySql8</Select.Option>
						<Select.Option value="3">oracle</Select.Option>
						<Select.Option value="4">sqlserver</Select.Option>
						{/*<Select.Option value="5">hive</Select.Option>*/}
						<Select.Option value="6">hive2</Select.Option>
						<Select.Option value="9">Hana</Select.Option>
					</Select>
				</Form.Item>

				{
					ty === '6' ? ( <Form.Item label={ '连接类型' }
										   name={ 'authType' }
										   rules={ [ { required: true, message: '请选择连接类型' } ] }
										   key={ 42 }>
						<Select onChange={handleSelectConnectType} disabled={formDisable}>
							<Select.Option value={1}>用户名</Select.Option>
							<Select.Option value={2}>用户名和密码</Select.Option>
						</Select>
					</Form.Item> ) :null
				}


				{
					fieldConfig.map( ( v, i ) => {
						return (
							<Form.Item label={ v.label } name={ v.name } rules={ v.rules } key={ i }>
								{ v.component }
							</Form.Item>
						);
					} )
				}

				{
					showPwd === 2||ty !== '6' ? ( 
						<Form.Item label={'密码'} name={'dbPassword'} rules={ [ { required: true, message: '请输入密码' } ]}>
							<Input.Password disabled={formDisable} />
						</Form.Item>
					) : null
				}
				

			</Form>
		</Modal>
	);
} );
